<template>
  <div class="login-page">
    <header class="header">
      <img class="img"
        alt="logo"
        src="@/assets/image/logo.png">
      <div class="title">{{title}}</div>
    </header>
    <section class="section">
      <div class="login-box"
        v-if="!drawer">
        <div class="login-title">用户登录</div>
        <div class="input-wrap">
          <img class="iconfont left icon-yonghu"
            src="@/assets/image/icon/user-icon.png"
            alt="">
          <input class="input"
            type="text"
            placeholder="请输入账号|手机号"
            v-model="form.username" />
        </div>
        <div class="input-wrap">
          <img class="iconfont left icon-mima"
            src="@/assets/image/icon/pwd.png"
            alt="">
          <input ref="pwd"
            class="input"
            :type="pwdtype"
            placeholder="请输入登录密码"
            v-model="form.password" />
          <img class="iconfont right"
            src="@/assets/image/icon/show.png"
            @click="pwdtype = 'text'"
            v-if="pwdtype === 'password'"
            alt="">
          <img class="iconfont right icon-yincang"
            src="@/assets/image/icon/hidden.png"
            @click="pwdtype = 'password'"
            v-if="pwdtype === 'text'"
            alt="">
        </div>
        <div class="log-btn"
          @click="submitLog">
          登录
        </div>
        <div class="triangle"></div>
        <div class="toggle-btn"
          @click="toggleReg">注册</div>
      </div>
      <div class="regist-box"
        v-else>
        <div class="regist-title">用户注册</div>
        <el-form :model="regForm"
          label-position="left"
          :rules="rules"
          ref="ruleForm"
          label-width="0"
          class="rule-form">
          <el-form-item label=""
            prop="userName">
            <el-input placeholder="输入登录名"
              v-model="regForm.userName"></el-input>
          </el-form-item>
          <el-form-item label=""
            prop="password">
            <el-input placeholder="输入登录密码"
              v-model="regForm.password"></el-input>
          </el-form-item>
          <el-form-item label=""
            prop="password2">
            <el-input placeholder="再次输入登录密码"
              v-model="regForm.password2"></el-input>
          </el-form-item>
          <el-form-item label=""
            prop="phoneNumber">
            <el-input placeholder="输入手机号"
              v-model="regForm.phoneNumber"></el-input>
          </el-form-item>
          <el-form-item label=""
            prop="captchaCode">
            <div class="code-wrap">
              <div style="width: 250px">
                <el-input placeholder="输入验证码"
                  v-model="regForm.captchaCode"></el-input>
              </div>
              <el-button :disabled="!phoneReg.test(regForm.phoneNumber)"
                @click="getCode"
                type="primary"
                plain>获取验证码</el-button>

            </div>
          </el-form-item>
        </el-form>
        <el-button class="reg-btn"
          style="width:100%"
          type="primary"
          round
          plain
          @click="submitReg">注册</el-button>
        <div class="triangle"></div>
        <div class="toggle-btn"
          @click="toggleLog">登录</div>
      </div>
    </section>
    <footer class="footer">
      <div>版权所有：xxxxxxxxxxxxxxxxxxxxxxxxxx</div>
      <div>技术支持：xxxxxxxxxxxxxxxxxxxxxxxxxx</div>
    </footer>
    <div class="sssss">
      <!-- <iframe style="width:100%;height:100%;"
        src="https://business.cqlandcloud.org.cn/businessMiddleOffice/#/home"
        frameborder="0"></iframe> -->
      <!-- <img src="https://business.cqlandcloud.org.cn/platform-ws/tool-wbs/oftenTool/listToolNomal?page=1&limit=8"
        alt=""> -->
      <a
        href="https://business.cqlandcloud.org.cn/platform-ws/tool-wbs/oftenTool/listToolNomal?page=1&limit=8">sasasas</a>
    </div>
  </div>
</template>

<script>
  import { login, userNameExist, captchaCode, registerByPhone, userPhoneExist } from '@/api/module/login.js';

  export default {
    name: 'theLogin',
    data() {
      let validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.regForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        phoneReg: /^[1][3,4,5,7,8][0-9]{9}$/,
        form: {
          username: '',
          password: null
        },
        regForm: {
          userName: '',
          password: '',
          password2: '',
          phoneNumber: '',
          captchaCode: ''
        },
        title: '自然资源监测平台',
        pwdtype: 'password',
        msg: null,
        drawer: false,
        rules: {
          userName: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { validator: this.checkname, trigger: 'blur' }
          ],
          password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
          password2: [{ validator: validatePass2, trigger: 'blur' }],
          phoneNumber: [{ required: true, min: 11, validator: this.checkPhone, type: 'number', trigger: 'blur' }],
          captchaCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
        }
      };
    },
    mounted() {
      document.onkeydown = () => {
        let key = window.event.keyCode;
        if (key == 13) {
          this.submitLog();
        }
      };
    },
    methods: {
      checkPhone(rule, value, callback) {
        if (value === '') {
          callback(new Error('手机号不能为空'));
        } else if (!this.phoneReg.test(value)) {
          callback(new Error('手机号格式不正确'));
        } else {
          userPhoneExist({ phoneNumber: value }).then((res) => {
            console.log(res);
            if (res.data) {
              callback(new Error('手机号已存在'));
            } else {
              callback();
            }
          });
        }
      },
      checkname(rule, value, callback) {
        userNameExist({ userName: value }).then((res) => {
          if (res.code !== 200) {
            callback(new Error('用户名已存在'));
          } else {
            callback();
          }
        });
      },
      getCode() {
        captchaCode({ phoneNumber: this.regForm.phoneNumber }).then((res) => {
          if (res.code === 200) {
            this.regForm.captchaCode = res.data;
          }
        });
      },
      submitLog() {
        login(this.form).then((res) => {
          if (res.code === 200) {
            window.location.href = res.data.targetUrl;
          }
        });
      },
      // submitLog() {
      //   login(this.form).then((res) => {
      //     const userinfo = { name: '张三', role: 'guo' };
      //     sessionStorage.setItem('userinfo', JSON.stringify(userinfo));
      //     // 在次处获取菜单可有可无，若此处获取，就不会再走router.beforeEach里的请求菜单
      //     // this.$store.dispatch('permission/generateRoutes').then((res) => {
      //     const formUrl = this.$route.query.formUrl;
      //     if (formUrl && formUrl !== '/') {
      //       window.location.href = formUrl;
      //     } else {
      //       this.$router.push({ path: '/home', replace: true });
      //     }
      //     // });
      //   });
      // },
      submitReg() {
        registerByPhone(this.regForm).then((res) => {});
      },
      toggleReg() {
        this.drawer = true;
      },
      toggleLog() {
        this.drawer = false;
        this.regForm = this.$options.data().regForm;
      }
    }
  };
</script>

<style lang="scss">
  .login-page {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    text-align: center;
    background: url('@/assets/image/bg-login.jpg') center no-repeat;
    background-size: cover;
    position: relative;
    .header {
      width: 100%;
      position: absolute;
      top: 100px;
      .img {
        width: 66px;
        height: 66px;
        vertical-align: middle;
      }
      .title {
        display: inline-block;
        vertical-align: middle;
        margin-left: 20px;
        font-size: 40px;
        font-weight: 600;
        color: #fff;
      }
    }
    .section {
      position: absolute;
      width: 480px;
      height: 510px;
      background-color: #fff;
      top: 28vh;
      right: 15vw;
      padding: 40px;
      box-sizing: border-box;
      overflow: hidden;
      .login-title {
        font-size: 26px;
        margin-bottom: 66px;
      }
      .input-wrap {
        position: relative;
        width: 100%;
        margin-bottom: 20px;
        .input {
          width: 100%;
          padding-left: 40px;
          border: none;
          height: 50px;
          outline: none;
          border: none;
          border-bottom: 1px solid $--border-color;
          background-color: #fff;
          box-sizing: border-box;
          &::-webkit-input-placeholder {
            color: $--border-color;
          }
        }
        .iconfont {
          position: absolute;
          top: 12px;
          width: 24px;
          height: 24px;
        }
        .left {
          left: 10px;
        }
        .right {
          right: 10px;
          cursor: pointer;
        }
      }
      .log-btn {
        height: 50px;
        line-height: 50px;
        border-radius: 50px;
        background-color: $--primary-color;
        text-align: center;
        color: #fff;
        font-size: 18px;
        letter-spacing: 8px;
        box-shadow: 2px 4px 8px rgba(0, 112, 210, 0.5);
        margin-top: 50px;
        margin-bottom: 30px;
        cursor: pointer;
      }
      .triangle {
        position: absolute;
        top: -46px;
        right: -11px;
        border-top: 70px solid transparent;
        border-bottom: 70px solid transparent;
        border-left: 70px solid $--primary-color;
        transform: rotate(-45deg);
      }
      .toggle-btn {
        position: absolute;
        top: 12px;
        right: 8px;
        color: #fff;
        cursor: pointer;
        font-size: 22px;
      }

      .regist-box {
        .regist-title {
          font-size: 26px;
          margin-bottom: 20px;
        }
        .el-input__inner {
          border: none;
          border-bottom: 1px solid $--border-color;
          border-radius: none;
        }
        .code-wrap {
          display: flex;
          justify-content: space-between;
        }
        .reg-btn {
          margin-top: 20px;
        }
      }
    }
    .footer {
      width: 100%;
      position: absolute;
      bottom: 30px;
      color: #fff;
    }
    .msg {
      position: absolute;
      top: 20px;
      width: 200px;
      height: 40px;
      left: 50%;
      margin-left: -100px;
      background-color: #fff;
      z-index: 100;
      line-height: 40px;
      border-radius: 4px;
    }
    .sssss {
      position: absolute;
      top: 0px;
      left: 0;
      width: 1000px;
      height: 600px;
    }
  }
</style>
